<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>vue学习使用</title>
	<!-- 第1步： 引入vue库文件 -->
	<script src="./js/vue.js"></script>
</head>

<body>
<!-- 第2步：挂载点 -->
<div id="app">
	<h3>{{title}}</h3>
	<button @click="setTitle">修改</button>
	<child2></child2>
	<child :ptitle="title"></child>
</div>

<!-- 第3步：实例化vue -->
<script>

  // 创建局部组件,它就是一个对象
  // 局部组件，创建完成后，如果你要给别人使用，一定要在配置中进行对应的配置
  const child = {
    // 父通过自定义属性向子传数据
    props: ['ptitle'],
    data() {
      return {
        title: '我是一个标题'
      }
    },
    template: `
			<div>
				<h1>{{title}} --- {{ptitle}}</h1>
				<!--				<h3>我是一个自定义的局部组件</h3>-->
			</div>`,
    beforeCreate() {
      console.log('child -- beforeCreate')
    },
    created() {
      console.log('child -- created')
    },
    beforeMount() {
      console.log('child -- beforeMount')
    },
    mounted() {
      console.log('child -- mounted')
    },
    beforeUpdate() {
      console.log('child -- beforeUpdate')
    },
    updated() {
      console.log('child -- updated')
    },
    beforeDestroy() {
      console.log('child -- beforeDestroy')
    },
    destroyed() {
      console.log('child -- destroyed')
    },
  }

  const child2 = {
    template: `<div>child2</div>`,
    created() {
      console.log('child2 --- created')
    }
  }

  const vm = new Vue({
    el: '#app',
    data: {
      title: 'aaaa',
    },
    components: {
      // key就是在使用时的标签名称
      // value就是对应的局部组件对象
      // child: child
      child,
      child2
    },
    beforeCreate() {
      console.log('parent -- beforeCreate')
    },
    created() {
      console.log('parent -- created')
    },
    beforeMount() {
      console.log('parent -- beforeMount')
    },
    mounted() {
      console.log('parent -- mounted')
      setTimeout(() => {
        this.$destroy()
      }, 1000)
    },
    beforeUpdate() {
      console.log('parent -- beforeUpdate')
    },
    updated() {
      console.log('parent -- updated')
    },
    beforeDestroy() {
      console.log('parent -- beforeDestroy')
    },
    destroyed() {
      console.log('parent -- destroyed')
    },
    methods: {
      setTitle() {
        this.title = Date.now()
      }
    }
  })
</script>

</body>

</html>
